<template>
  <div>
    <div class="sider">
      <a href="#" class="logo"
        ><img src="~@/assets/images/logo02.png" alt="logo"
      /></a>
      <div class="user_info">
        <img src="~@/assets/images/2.jpg" alt="person" />
        <span>欢迎&nbsp;&nbsp;吴劲</span>
        <b>管理员</b>
      </div>
      <!-- 左侧导航栏 -->
      <div class="menu">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="rgb(50, 55, 69)"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
        <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">文章列表</el-menu-item>
              <el-menu-item index="1-2">发表文章</el-menu-item>
              <el-menu-item index="1-3">文章类别管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 顶部栏 -->
      <div class="header_bar">
        <div class="user_center_link">
          <a href="./user.html" target="main_frame">个人中心</a>
          <img src="images/2.jpg" alt="person" />
          <a href="javascript:void(0)" class="logout"
            ><i class="iconfont icon-tuichu"></i> 退出</a
          >
        </div>
      </div>
      <!-- 右侧主体内容 -->
      <div class="main" id="main_body">
        <!-- <iframe src="./main_count.html" name="main_frame" style="width: 100%;height: 100%;"></iframe> -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
};
</script>

<style lang="less">
#main_body {
  overflow-y: scroll;
}
</style>